<template>
  <div id="app">
    <mu-linear-progress mode="indeterminate" :color="progress.color" v-show="progress.show"></mu-linear-progress>
    <keep-alive>
      <router-view />
    </keep-alive>
    <ww-blackboard v-model="blackboardOpen"></ww-blackboard>
    <ww-audio-player v-model="wwapStatus" :src="music" v-if="music.length"></ww-audio-player>
    <mu-snackbar position="top" :open="snackbar.open" :color="snackbar.color">{{snackbar.message}}</mu-snackbar>
    <ww-image-viewer></ww-image-viewer>
  </div>
</template>
<script>
import WwBlackboard from './pages/blackboard/index'
export default {
  components: {
    WwBlackboard,
  },
  data () {
    return {
      snackbar: {
        open: false,
        color: '',
        message: '',
      },
      progress: {
        show: false,
        color: '',
      },
      blackboardOpen: false,
      wwapStatus: 'collapse',
    }
  },
  computed: {
    netState () {
      return this.$store.state.netState
    },
    wwapStatusStore () {
      return this.$store.state.wwapStatus
    },
    blackboardOpenStore () {
      return this.$store.state.blackboard.open
    },
    music () {
      return this.$store.state.music
    },
  },
  watch: {
    blackboardOpen (newV) {
      this.$store.commit('TOGGLE_BLACKBOARD', newV)
    },
    blackboardOpenStore (newV) {
      this.blackboardOpen = newV
    },
    wwapStatusStore (newV, oldV) {
      this.wwapStatus = newV
    },
    wwapStatus (newV, oldV) {
      this.$store.commit('SET_WWAP_STATUS', this.wwapStatus)
    },
    netState (newV, oldV) {
      // init -> conn
      if (oldV === 'init' && newV === 'connected') {
        // do nothing
      }
      // init -> neterr
      if (oldV === 'init' && newV === 'network_error') {
        this.setSnackbar('正在尝试连接', 'info', false)
        this.setProgress('')
      }
      // conn -> server_disconn
      if (oldV === 'connected' && newV === 'server_disconnect') {
        this.setSnackbar('服务器断开了你的连接', 'error', false)
        this.setProgress(false)
      }
      // server_disconn -> init (manually)
      if (oldV === 'server_disconnect' && newV === 'init') {
        this.setSnackbar('正在尝试连接', 'info', false)
        this.setProgress('')
      }
      // conn -> neterr
      if (oldV === 'connected' && newV === 'network_error') {
        this.setSnackbar('连接已断开，正在尝试重新连接...', 'error', false)
        this.setProgress('error')
      }
      // neterr -> conn
      if (oldV === 'network_error' && newV === 'connected') {
        this.setSnackbar('连接已恢复', 'success', true)
        this.setProgress(false)
      }
    },
  },
  methods: {
    setProgress (colorOrFalse) {
      if (typeof colorOrFalse === 'string') {
        this.progress.color = colorOrFalse
        this.progress.show = true
      } else {
        this.progress.show = false
      }
    },
    setSnackbar (message, color, auto) {
      this.snackbar.message = message
      this.snackbar.color = color
      this.snackbar.open = true
      if (auto) {
        window.setTimeout(() => {
          this.snackbar.open = false
        }, 2000)
      }
    },
  },
  created () {
    this.$store.dispatch('getMusic', {
      err: null,
      counter: 10,
      interval: 5000,
    })
    this.$store.dispatch('getNotes', {
      err: null,
      counter: 10,
      interval: 5000,
    })
  },
}
</script>
<style lang="less">
body,
#app {
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
</style>
